<template>
  <div class="ProblemType-container">
    <v-row class="table-wrap" no-gutters>
      <v-col class="box" cols="3">
        <ItemCate></ItemCate>
      </v-col>
      <v-col class="box" cols="3">
        <Symptom></Symptom>
      </v-col>
      <v-col class="box" cols="4">
        <Problem></Problem>
      </v-col>
      <v-col class="box" cols="3">
        <Solution></Solution>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import ItemCate from "@/components/Maintenance/Setting/ProblemType/ItemCate.vue";
import Symptom from "@/components/Maintenance/Setting/ProblemType/Symptom.vue";
import Problem from "@/components/Maintenance/Setting/ProblemType/Problem.vue";
import Solution from "@/components/Maintenance/Setting/ProblemType/Solution.vue";

@Component({
  components: {
    Table,
    Dialog,
    ItemCate,
    Symptom,
    Problem,
    Solution,
  },
})
export default class ProblemType extends Vue {
  mounted() {
    this.$store.commit("MaintenanceStore/closeActionIcon");
  }
}
</script>

<style lang="scss" scoped>
@import "./ProblemType.scss";
</style>
